﻿<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
      <a-radio-group
        default-value="OrderCount"
        @change="getDataList()"
        button-style="solid"
        v-model="sorter.field"
      >
        <a-radio-button value="OrderCount">
          <a-icon type="arrow-down" />
          订单数量
        </a-radio-button>
        <a-radio-button value="OrderMoney">
          <a-icon type="arrow-down" />
          订单金额
        </a-radio-button>
        <a-radio-button value="OrderDcCount">
          <a-icon type="arrow-down" />
          发货数量
        </a-radio-button>
        <a-radio-button value="OrderDcMoney">
          <a-icon type="arrow-down" />
          发货金额
        </a-radio-button>
      </a-radio-group>
    </div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="3" :sm="24">
            <a-form-item label="查询类别">
              <a-select v-model="queryParam.condition" @change="handleSelectChange">
                <a-select-option key="PrincipalName">业务员</a-select-option>
                <a-select-option key="cCusCode">客户名称</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="24" v-if="this.queryParam.condition === 'cCusCode'">
            <CustRemoteSearchByCondition
              v-model="keyword"
              mode="default"
              :is-my-data="false"
              @BindCustomer="BindCustomer"
              :disabled="false"
              placeholder="检索客户(名称/编号)(省市区名称禁止查询)">
            </CustRemoteSearchByCondition>
          </a-col>
          <a-col :md="4" :sm="24" v-if="this.queryParam.condition === 'PrincipalName'">
            <a-form-item>
              <a-input allowClear v-model="queryParam.keyword" placeholder="请输入业务员名称" @keydown.enter="getDataList" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-range-picker :value="time" @change="onAllocateTimeChange" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.getDataList()
                }
              "
            >查询
            </a-button>
            <a-button style="margin-left: 8px" @click="repossess">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      :scroll="{ y: tableHeight }"
      :columns="columns"
      :rowKey="(row, index) => index"
      :dataSource="data"
      :pagination="false"
      :loading="loading"
      :rowClassName="rowClassName"
      @change="handleTableChange"
      :bordered="true"
      size="small">
      <span slot="OrderCount" slot-scope="OrderCount" v-format="'#,##0'">{{ OrderCount }}</span>
      <span slot="OrderMoney" slot-scope="OrderMoney" v-format="'#,##0'">{{ OrderMoney }}</span>
      <span slot="OrderDcCount" slot-scope="OrderDcCount" v-format="'#,##0'">{{ OrderDcCount }}</span>
      <span slot="OrderDcMoney" slot-scope="OrderDcMoney" v-format="'#,##0'">{{ OrderDcMoney }}</span>
    </a-table>
  </a-card>
</template>

<script>
import moment from 'moment'
import CustRemoteSearchByCondition from '@/components/RemoteSearch/CustRemoteSearchByCondition'

const columns = [
  { title: '业务员', dataIndex: 'PrincipalName', width: '5%', align: 'center' },
  { title: '客户信息', dataIndex: 'cCusName', width: '25%' },
  { title: '品名', dataIndex: 'PName', width: '20%' },
  {
    title: '订单信息',
    children: [
      { title: '数量', dataIndex: 'OrderCount', align: 'right', scopedSlots: { customRender: 'OrderCount' } },
      {
        title: '金额',
        dataIndex: 'OrderMoney',
        align: 'right',
        scopedSlots: { customRender: 'OrderMoney' }
      }
    ]
  },
  {
    title: '发货信息',
    children: [
      { title: '数量', dataIndex: 'OrderDcCount', align: 'right', scopedSlots: { customRender: 'OrderDcCount' } },
      {
        title: '金额',
        dataIndex: 'OrderDcMoney',
        align: 'right',
        scopedSlots: { customRender: 'OrderDcMoney' }
      }
    ]
  }
]

export default {
  components: {
    CustRemoteSearchByCondition
  },
  mounted () {
    this.time = [moment(this.startTime, 'YYYY-MM-DD'), moment(this.endTime, 'YYYY-MM-DD')]
    this.queryParam.sDate = this.startTime
    this.queryParam.dDate = this.endTime
    this.$nextTick(() => {
      // 页面渲染完成后的回调
      this.tableHeight = this.getTableHeight(false)
    })
    // this.getDataList()
  },
  data () {
    return {
      data: [],
      tableHeight: 570, // 表格高度
      keyword: undefined,
      time: null,
      // pagination: {
      //   current: 1,
      //   pageSize: 25,
      //   showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
      //   pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
      //   showSizeChanger: true
      // },
      filters: {},
      sorter: { field: 'OrderCount', order: 'desc' },
      loading: false,
      columns,
      queryParam: { condition: 'PrincipalName', keyword: undefined },
      selectedRowKeys: [],
      startTime: moment(new Date()).month(new Date().getMonth()).date(1).startOf('month').format('YYYY-MM-DD'),
      endTime: moment(new Date()).month(new Date().getMonth()).date(1).endOf('month').format('YYYY-MM-DD')
    }
  },
  methods: {
    onAllocateTimeChange (dates, dateStrings) {
      this.queryParam.sDate = dateStrings[0]
      this.queryParam.dDate = dateStrings[1]
      this.time = dates
    },
    repossess () {
      this.keyword = undefined
      this.queryParam = { condition: 'PrincipalName', keyword: undefined }
      this.time = [moment(this.startTime, 'YYYY-MM-DD'), moment(this.endTime, 'YYYY-MM-DD')]
      this.queryParam.sDate = this.startTime
      this.queryParam.dDate = this.endTime
      // this.getDataList()
    },
    handleTableChange (pagination, filters, sorter) {
      // this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList()
    },
    handleSelectChange (value, option) {
      if (option.key === 'PrincipalName') {
        this.queryParam.keyword = undefined
      }
    },
    BindCustomer (val) {
      this.$set(this.queryParam, 'keyword', val == null ? null : val.cCusCode)
    },
    getDataList () {
      this.selectedRowKeys = []
      this.data.pop()
      this.loading = true
      this.$http
        .post('/Base_Manage/Home/GetSaleReport', {
          // PageIndex: this.pagination.current,
          // PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          if (resJson.Success) {
            this.loading = false
            this.data = resJson.Data
            var OrderCount = 0
            var OrderMoney = 0
            var OrderDcCount = 0
            var OrderDcMoney = 0
            resJson.Data.forEach(item => {
              OrderCount = item.OrderCount + OrderCount
              OrderMoney = item.OrderMoney + OrderMoney
              OrderDcCount = item.OrderDcCount + OrderDcCount
              OrderDcMoney = item.OrderDcMoney + OrderDcMoney
            })
            const row = {
              OrderCount,
              OrderMoney,
              OrderDcCount,
              OrderDcMoney,
              PrincipalName: '合计'
            }
            this.data.push(row)
          }
        })
    },
    rowClassName (record, index) {
      if (record.PrincipalName === '合计') {
        return 'heji'
      }
    },
    timeFormat (val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .heji {
  position: sticky;
  bottom: 0;
  background: #fff;
  font-size: 19px;
  font-weight: bold;
}
</style>
